<template>
	<view class="my-modal-wrapper" v-if="show">
		<view class="my-modal" :style="{width: width}">
			<view class="header">
				{{ title }}
			</view>
			<view class="body">
				<slot></slot>
			</view>
			<view class="footer">
				<Button v-if="!noClose" large @click="close">
					关闭
				</Button>
				<Button large type="primary" :loading="loading" @click="comfirm" v-if="!noComfirm"
					style="margin-left: 3rem;">
					确认
				</Button>
			</view>
		</view>
	</view>
</template>

<script>
	import Button from "@/components/button/index.vue";

	export default {
		name: 'Modal',
		components: {
			Button
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			width: {
				type: String,
				defalut: 'fit-content'
			},
			noComfirm: {
				type: Boolean,
				default: false
			},
			noClose: {
				type: Boolean,
				default: false
			},
			autoClose: {
				type: Boolean,
				default: true
			},
			loading: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
				this.$emit('close');
			},
			comfirm() {
				if (this.autoClose) {
					this.show = false;
					this.$emit('confirm');
				} else {
					this.$emit('confirm', () => {
						this.show = false;
					});
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-modal-wrapper {
		opacity: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: opacity 300ms ease 0ms;
		transform-origin: 50% 50%;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.my-modal {
		background-color: #fff;
		border-radius: 3rem;
		display: flex;
		flex-direction: column;
		padding: 4rem;
		width: 60rem;

		.header {
			display: flex;
			justify-content: center;
			font-size: 2.5rem;
			font-weight: bold;
		}

		.body {
			padding: 4rem 0;

			/deep/ .uni-label-text {
				font-size: 2rem;
			}

			/deep/ .uni-stat-box {
				min-height: 8rem;

				.uni-select {
					height: 8rem;
					padding: 0 2rem;
					border: 1px solid #ccc;
					border-radius: 1rem;

					.uni-icons {
						font-size: 3rem !important;
					}

					.uni-select__selector-item {
						line-height: 6rem !important;
						font-size: 2rem !important;
					}

					.uni-select__input-text {
						font-size: 2rem;

						&.uni-select__input-placeholder {
							font-size: 2rem;
							color: rgb(192, 196, 204);
						}
					}
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			/deep/ uni-button {
				padding: 0.5rem 8rem;
				font-size: 2rem;
				margin-left: 2rem;
				margin-right: 0;
				border-radius: 4rem;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
</style>